<template>
  <div class="app">
    <!--route  是否开启路由模式   fixed	是否固定在底部-->
    <van-tabbar
      v-model="active"
      fixed
      :route="true"
      @change="tabChange"
      v-if="$route.meta.TabbarShow"
    >
      <van-tabbar-item icon="wap-home-o" :to="{ path: '/Home' }"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="user-circle-o">会员</van-tabbar-item>

      <van-tabbar-item
        icon="cart-o"
        :badge="commoditys"
        :to="{ path: '/CarList' }"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
    </van-tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
import bus from "@/utils/Eventbus";
export default {
  data() {
    return {
      // active: 当前选中标签的名称或索引值
      active: 0,
      //本地 获取购物车商品数量
      commoditys: JSON.parse(localStorage.getItem("productList"))
        ? JSON.parse(localStorage.getItem("productList")).length
        : 0,
    };
  },
  methods: {
    tabChange(active) {
      // console.log(active);
      this.active = active;
    },
  },
  mounted() {
    bus.$on("subtract", () => {
      this.commoditys--;
    });
    bus.$on("sub", () => {
      this.commoditys++;
    });
  },
};
</script>

<style lang="less">
</style>
